<template>
	<view class="signcontent">
		<canvas class="huabu" id="huabu" canvas-id="myCanvas" disable-scroll @touchstart="start"
			@touchmove="move"></canvas>

		<view class="content">
			<view class="tiptxt">请在空白处签名</view>

			<view class="btns">
				<button type="primary" plain size="mini" @click="reset">重写</button>
				<button type="primary" size="mini" @click="save">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "sign",
	data() {
		return {
			width: 0,
			height: 0,
			ctx: null,
			startX: null,
			startY: null,
			lineColor: '#0265ff', // 颜色
			lineSize: 5, // 画笔粗细
			canvasWidth: 0,
			canvasHeight: 0
		};
	},
	created() {
		uni.getSystemInfo({
			success: (res) => {
				//console.log(res);
				this.width = res.windowWidth;
				this.height = res.windowHeight;
			}
		});
	},
	mounted() {
		this.ctx = uni.createCanvasContext('myCanvas', this);

		let huabu = uni.createSelectorQuery().in(this).select("#huabu");
		huabu.boundingClientRect((data) => {
			this.canvasWidth = data.height;
			this.canvasHeight = data.width;
			console.log(data);
			// this.ctx.width=this.height;
			// this.ctx.height=this.width;

		})
			.exec();
		// this.setCanvasBg('#fff');//设置画布背景颜色
	},
	methods: {
		start(e) {

			//console.log(e);
			this.startX = e.changedTouches[0].x;
			this.startY = e.changedTouches[0].y;
			// #ifndef MP-WEIXIN
			this.startX = e.changedTouches[0].y;
			this.startY = this.width - e.changedTouches[0].x;
			// #endif
			//画笔颜色
			this.ctx.setStrokeStyle(this.lineColor);
			//设置线条粗细
			this.ctx.setLineWidth(this.lineSize);
			//设置线条的结束端点样式
			this.ctx.setLineCap('round'); //'butt'、'round'、'square'
			//开始画笔
			this.ctx.beginPath();
		},
		move(e) {
			//console.log(e);
			//取点
			let temX = e.changedTouches[0].x;
			let temY = e.changedTouches[0].y;
			// #ifndef MP-WEIXIN
			temX = e.changedTouches[0].y;
			temY = this.width - e.changedTouches[0].x;
			// #endif
			//画线条
			// this.ctx.translate(this.canvasWidth / 2, this.canvasHeight / 2);
			// this.ctx.rotate(90 * Math.PI / 180);

			this.ctx.moveTo(this.startX, this.startY);
			this.ctx.lineTo(temX, temY);
			this.ctx.stroke();

			this.startX = temX;
			this.startY = temY;
			this.ctx.draw(true);


		},
		/**
		 * 重写
		 */
		reset() {
			this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
			this.ctx.draw();

			// this.setCanvasBg('#fff');
			this.$emit('reset')
		},


		//生成图片
		save() {
			uni.canvasToTempFilePath({
				canvasId: 'myCanvas',
				fileType: 'png',
				quality: 0.8, //图片质量
				success: async (res) => {
					// #ifndef MP-WEIXIN
					this.$emit('confirm', res.tempFilePath)
					// #endif
					// #ifdef MP-WEIXIN
					let img = await this.rotateImage(res.tempFilePath)
					this.$emit('confirm', img)
					// #endif


				}
			}, this);
		},
		//设置画布背景颜色
		setCanvasBg(color) {
			this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight);
			this.ctx.setFillStyle(color);
			this.ctx.fill(); //设置填充
			this.ctx.draw(); //开画
		},
		rotateImage(filePath, angle = -90) { // angle为旋转角度，
			return new Promise((resolve) => {
				uni.getImageInfo({
					src: filePath,
					success: async function (info) {
						const canvas = uni.createOffscreenCanvas({ type: '2d', compInst: this }); // 创建一个新的canvas实例
						const ctx = canvas.getContext('2d');
						const width = info.width;
						const height = info.height;
						canvas.width = height; // 旋转后宽高交换
						canvas.height = width;
						const rotateAngle = angle * Math.PI / 180; // 将角度转换为弧度
						ctx.translate(height / 2, width / 2); // 将画布的原点移动到中心点，便于旋转
						ctx.rotate(rotateAngle); // 旋转画布
						// 创建一个图片
						const image = canvas.createImage()
						// 等待图片加载
						await new Promise(resolve => {
							image.onload = resolve
							image.src = filePath
						})
						ctx.drawImage(image, -width / 2, -height / 2, width, height); // 绘制旋转后的图片
						uni.canvasToTempFilePath({ // 将旋转后的canvas内容转换为图片文件
							canvas: canvas,
							success: function (res) {
								resolve(res.tempFilePath)// 旋转后的图片路径
							},
							fail: function (err) {
								console.log(err);
							}
						});
					},
					fail: function (err) {
						console.log(err);
					}
				});
			})

		}
	}
}
</script>

<style lang="scss">
.signcontent {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: relative;
	background-image: linear-gradient(#eee 1px, transparent 1px),
			linear-gradient(90deg, #eee 1px, transparent 1px);
		background-size: 20px 20px;
}

.content {
	width: 100vh;
	height: 100vw;
	transform: rotateZ(90deg) translateY(-100vw);
	transform-origin: 0% 0%;
	position: absolute;
	left: 0;
	top: 0;
	max-width: unset;
	pointer-events: none;
	/* #ifdef H5 */
	width: calc(100vh - 44px);
	/* #endif */
}

.huabu {
	width: 100vw;
	height: 100vh;
	width: 100vh;
	height: 100vw;
	transform: rotateZ(90deg) translateY(-100vw);
	transform-origin: 0% 0%;
	position: absolute;
	left: 0;
	top: 0;
}

.tiptxt {
	position: absolute;
	left: 30rpx;
	top: 30rpx;
	color: #999;
	font-size: 32rpx;
}

.btns {
	position: absolute;
	right: 40rpx;
	bottom: 30rpx;
	right: calc(40rpx + constant(safe-area-inset-bottom));
	right: calc(40rpx + env(safe-area-inset-bottom));
	pointer-events: all;

	button {
		border-radius: 100rpx;
		margin-left: 30rpx;
		width: 100px;
		height: 36px;
		font-size: 14px;

		&:first-child {
			margin-left: 0;
		}
	}
}
</style>